<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <!-- 搜索与添加 -->
        <el-col :span="8">
          <el-input placeholder="权限名称/模式类别" v-model="rootForm.keyWord" clearable @clear="getRootList">
            <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" @click="getRootList">搜索</el-button>
        </el-col>

        <el-col :span="4" id="saveStyle">
          <el-button type="warning" @click="addDialogVisible = true">新增权限</el-button>
        </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table :data="rootlist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="权限名称" prop="rootName"></el-table-column>
        <el-table-column label="模式类别" prop="pattern"></el-table-column>
        <el-table-column label="权限等级" prop="level"></el-table-column>
        <el-table-column label="操作" width="190px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showUpdateRoot(scope.row)"
            ></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRootById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="修改权限" :visible.sync="editDialogVisible" width="30%" @close="editDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
        <el-form-item label="权限名称" prop="rootName">
          <el-input v-model="editForm.rootName"></el-input>
        </el-form-item>
        <el-form-item label="模式类别" prop="pattern">
          <el-input v-model="editForm.pattern"></el-input>
        </el-form-item>
        <el-form-item label="权限等级" prop="level">
          <el-input v-model="editForm.level"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRootInfo">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增权限" :visible.sync="addDialogVisible" width="30%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
        <el-form-item label="权限名称" prop="rootName">
          <el-input v-model="addForm.rootName"></el-input>
        </el-form-item>
        <el-form-item label="模式类别" prop="pattern">
          <el-input v-model="addForm.pattern"></el-input>
        </el-form-item>
        <el-form-item label="权限等级" prop="level">
          <el-input v-model="addForm.level"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRootInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rootForm: {
            keyWord: '',
        },
      rootlist: [],
      editForm: {},
      addForm: {},
      addDialogVisible: false,
      //控制修改用户对话的显示与隐藏
      editDialogVisible: false,
      editFormRules: {
        rootName: [
          { required: true, message: "请输入权限名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在2到5个字符之间", trigger: "blur" }
        ],
        pattern: [
          { required: true, message: "请输入模式类别", trigger: "blur" },
          { min: 2, max: 5, message: "长度在2到5个字符之间", trigger: "blur" }
        ],
        level: [
          { required: true, message: "请输入权限等级", trigger: "blur" },
        ]
      },
      addFormRules: {
        rootName: [
          { required: true, message: "请输入类别名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在2到5个字符之间", trigger: "blur" }
        ],
        pattern: [
          { required: true, message: "请输入模式类别", trigger: "blur" },
          { min: 2, max: 5, message: "长度在2到5个字符之间", trigger: "blur" }
        ],
        level: [
          { required: true, message: "请输入权限等级", trigger: "blur" },
        ]
      }
    };
  },
  created() {
    this.getRootList();
  },
  methods: {
    async getRootList() {
      const res = await this.$http.get(
        'root/getRootByCondition',{ params: this.rootForm}
      );
      if (res.status !== 200) {
        return this.$message.error("获取类型列表失败!");
      }
      console.log(res.data);
      this.rootlist = res.data;
    },
    showUpdateRoot(row) {
      this.editForm = row
      this.editDialogVisible = true
    },
    editRootInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        await this.$http
          .post("root/update", this.editForm)
          .then(resp => {
            if (resp.status !== 201) return this.$message.error("更新失败");
            this.$message.success("更新成功");
            this.editDialogVisible = false;
            this.getRootList();
          })
          .catch(() => {
            this.$message.error("异常！");
          });
      });
    },
    //删除用户
    async removeRootById(id){
      const cont = await this.$confirm('是否删除该类别信息','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)

      if(cont !== 'confirm'){
        return this.$message.info('已取消删除')
      }

      await this.$http.delete('root/delete/'+id)
      .then(resp=>{
            if (resp.data !== 1) return this.$message.error("删除失败")
            this.$message.success("删除成功")
            this.getRootList()
        })
        .catch(() => {
            this.$message.error("异常！");
        });
    },
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();
    },
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    addRootInfo() {
      this.$refs.addFormRef.validate(async valid => {
        if(!valid) return
         await this.$http.post('root/save',this.addForm)
         .then(resp=>{
            if (resp.status !==201) return this.$message.error("添加失败")
            this.$message.success("添加成功")
            this.addDialogVisible = false
            this.getRootList()
        })
        .catch(() => {
            this.$message.error("异常！");
        });
      })
    },
  }
};
</script>

<style lang="less" scoped>
#saveStyle {
  float:right
}
</style>